<template>
   <view>
      <Headernav-music></Headernav-music>
      <view class="list-head">
        <view class="list-head-img">
          <image :src="playlist.coverImgUrl" mode=""></image>
          <text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
        </view>
        <view class="list-head-text">
          <view>{{ playlist.name }}</view>
          <view>{{ playlist.description }}</view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <view v-show="isShow" class="list-music-title">
          <text class="iconfont iconbofang1"></text>
          <text>播放全部</text>
          <text>(共{{ playlist.trackCount }}首)</text>
        </view>
        <view class="list-music">
          <view class="list-music-item" v-for="(item, index) in playlist.tracks" :key="item.id" @tap="handleSongClick(item.id)">
            <view class="list-music-top">{{ index + 1 }}</view>
            <view class="list-music-song">
              <view>{{ item.name }}</view>
            </view>
            <text class="iconfont icon-yinlebofangqi"></text>
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
 <script>
 import { list } from '../../common/api.js';
 
 export default {
   data() {
     return {
       title: "榜单列表",
       playlist: {
         coverImgUrl: '',
         trackCount: '',
         creator: ''
       },
       privileges: [],
       isShow: false
     };
   },
   onLoad(options) {
     const listid = options.listid;
     this.fetchPlaylist(listid);
   },
   methods: {
     fetchPlaylist(listid) {
       list(listid)
         .then((res) => {
           if (res.data.code === 200) {
             this.title = res.data.playlist.name;
             this.playlist = res.data.playlist;
             // 检查并过滤重复的歌曲id
             const uniqueTracks = [];
             const trackIds = new Set();
             this.playlist.tracks.forEach((track) => {
               if (!trackIds.has(track.id)) {
                 uniqueTracks.push(track);
                 trackIds.add(track.id);
               }
             });
             this.playlist.tracks = uniqueTracks;
             this.privileges = res.data.privileges;
             this.isShow = true;
           } else {
             console.error('获取歌单信息失败:', res.data);
           }
         })
         .catch((err) => {
           console.error('请求出错:', err);
         });
     },
     handleSongClick(id) {
       console.log('点击的歌曲id:', id);
       this.navPlayer(id);
     },
     navPlayer(id) {
       uni.navigateTo({
         url: `/pages/player/player?songId=${id}`
       });
     }
   }
 };
 </script>
<style>
.list-head {
  display: flex;
  margin: 30rpx;
}

.list-head-img {
  width: 265rpx;
  height: 265rpx;
  border-radius: 15rpx;
  margin-right: 40rpx;
  overflow: hidden;
  position: relative;
}

.list-head-img image {
  width: 100%;
  height: 100%;
}

.list-head-img text {
  position: absolute;
  font-size: 26rpx;
  color: white;
  right: 8rpx;
  top: 8rpx;
}

.list-head-text {
  flex: 1;
  font-size: 24rpx;
  color: #c3d1e3;
}

.list-head-text image {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
}

.list-music {
  background: white;
  border-radius: 20rpx; /* 增加圆角 */
  overflow: hidden;
  margin: 45rpx 30rpx; /* 调整外边距 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 增加阴影 */
}

.list-music-item {
  display: flex;
  margin: 0 30rpx;
  padding: 20rpx 0; /* 增加内边距 */
  align-items: center;
  border-bottom: 1rpx solid #eee; /* 增加分隔线 */
  transition: background-color 0.3s ease; /* 增加过渡效果 */
}

.list-music-item:last-child {
  border-bottom: none; /* 移除最后一项的分隔线 */
}

.list-music-item:hover {
  background-color: #f9f9f9; /* 悬停效果 */
}

.list-music-top {
  width: 56rpx;
  font-size: 28rpx;
  color: #979797;
}

.list-music-song {
  flex: 1;
  line-height: 40rpx;
}

.scroll-Y {
  height: 700rpx;
}

.list-music-title {
  height: 58rpx;
  line-height: 58rpx;
  margin: 30rpx 30rpx 70rpx 30rpx;
}

.list-music-song image {
  width: 34rpx;
  height: 22rpx;
  margin-right: 10rpx;
}
</style>